<!--
 * @Descripttion: 
 * @Author: wayde
 * @Date: 2021-04-15 16:54:24
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      html,
      body {
        overflow: hidden;
        margin: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/@antv/l7"></script>
    <script>
      const scene = new L7.Scene({
        id: "map",
        map: new L7.GaodeMap({
          mapStyle: "dark",
          center: [120.19382669582967, 30.258134],
          zoom: 6,
          pitch: 0,
          token: "***",
        }),
      });
      scene.on("loaded", () => {
        fetch(
          "https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json"
        )
          .then((res) => res.json())
          .then((data) => {
            data.features = data.features.filter((item) => {
              return item.properties.capacity > 500;
            });
              const pointLayer = new L7.PointLayer({})
              .source(data)
              .shape("circle")
              .size("capacity", [0, 16])
              .color("capacity", [
                "#34B6B7",
                "#4AC5AF",
                "#5FD3A6",
                "#7BE39E",
                "#A1EDB8",
                "#CEF8D6",
              ])
              .active(true)
              .style({
                opacity: 0.5,
                strokeWidth: 0,
              });
            scene.addLayer(pointLayer);
          });
      });
    </script>
  </body>
</html>
